<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":"
            + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>"/> <!-- 设置页面的基础路径，页面所有资源引入和页面跳转都基于bathPath -->

    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
</head>
<body>
<article class="page-container">
    <!-- form的action中根据判断共享对象user是否为空，来指定表单提交的url -->
    <form class="form form-horizontal" action="${empty user ? 'user/insert.do' : 'user/update.do'}" method="post" id="userForm">
        <!-- 在更新用户信息的环境下把userId隐藏提交给后台 -->
        <input type="hidden" value="${user.userId }" name="userId" />
        <%-- 分别在新增用户和更新用户的环境下把当前登录主体的userId隐藏提交给后台--%>
        <c:choose>
            <c:when test="${empty user}">
                <input type="hidden" value="<shiro:principal property='userId'/>" name="createUser"/>
            </c:when>
            <c:otherwise>
                <input type="hidden" value="<shiro:principal property='userId'/>" name="updateUser"/>
            </c:otherwise>
        </c:choose>

        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>用户名：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <!-- 在更新用户信息的环境下锁定用户名信息，不能更改 -->
                <input type="text" class="input-text" ${user != null ? 'disabled' : '' } value="${user.username }" placeholder="请输入系统用户名" id="username" name="username">
            </div>

            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>真实姓名：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="text" class="input-text" value="${user.realname }" placeholder="请输入真实姓名" id="realname" name="realname">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>${user != null ? "密码" : "初始密码"}</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="password" class="input-text" placeholder="${user != null ? '请输入原密码':'请输入初始密码'}" id="password" name="password">
            </div>

            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>确认密码：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="password" class="input-text" placeholder="请确认密码" id="passwordAgain" name="passwordAgain">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>年龄：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="text" class="input-text" placeholder="年龄" value="${user.age}" id="age" name="age">
            </div>

            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>身份证号：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="text" class="input-text" placeholder="身份证号" value="${user.idCard}" id="idCard" name="idCard">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>性别：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <div class="radio-box">
                    <input type="radio" id="gender-1" value="1" name="gender"
                    ${user.gender eq '1' ? 'checked' : '' }>
                    <label for="gender-1">男</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="gender-2" value="2" name="gender"
                    ${user.gender eq '2' ? 'checked' : '' }>
                    <label for="gender-2">女</label>
                </div>
            </div>

            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>教育背景：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <div class="radio-box">
                    <input type="radio" id="college" value="1" name="education"
                    ${user.gender eq '1' ? 'checked' : '' }>
                    <label for="college">专科</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="bachelor" value="2" name="education"
                    ${user.gender eq '2' ? 'checked' : '' }>
                    <label for="bachelor">本科</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="master" value="3" name="education"
                    ${user.gender eq '3' ? 'checked' : '' }>
                    <label for="master">研究生</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="doctor" value="4" name="education"
                    ${user.gender eq '4' ? 'checked' : '' }>
                    <label for="doctor">博士</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="postdoctor" value="5" name="education"
                    ${user.gender eq '5' ? 'checked' : '' }>
                    <label for="postdoctor">博士后</label>
                </div>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>电话：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="text" class="input-text" placeholder="电话" value="${user.phone}" id="phone" name="phone">
            </div>

            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>邮箱：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="text" class="input-text" placeholder="邮箱" value="${user.email}" id="email" name="email">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>科室：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <span class="select-box">
					<select name="deptId" class="select">
						<option value="">请选择</option>
						<c:forEach var="dept" items="${depts }">
                            <!-- 当处于编辑环境时，当前需要编辑的用户的roleId被默认选中 -->
                            <option ${dept.deptId eq user.deptId ? 'selected' : '' } value="${dept.deptId }">${dept.deptName }</option>
                        </c:forEach>
					</select>
				</span>
            </div>

            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>职务：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <span class="select-box">
					<select name="jobId" class="select">
						<option value="">请选择</option>
						<c:forEach var="job" items="${jobs }">
                            <!-- 当处于编辑环境时，当前需要编辑的用户的roleId被默认选中 -->
                            <option ${job.jobId eq user.jobId ? 'selected' : '' } value="${job.jobId }">${job.jobName }</option>
                        </c:forEach>
					</select>
				</span>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>上级：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <span class="select-box">
					<select name="superiorId" class="select">
						<option value="">请选择</option>
						<c:forEach var="superior" items="${superiors }">
                            <!-- 当处于编辑环境时，当前需要编辑的用户的roleId被默认选中 -->
                            <option ${user.superiorId eq superior.userId ? 'selected' : '' } value="${superior.userId }">${superior.realname }</option>
                        </c:forEach>
					</select>
				</span>
            </div>

            <label class="form-label col-xs-2 col-sm-2">荣誉：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="text" class="input-text" placeholder="荣誉" value="${user.honor}" id="honor" name="honor">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>擅长：</label>
            <div class="formControls col-xs-8 col-sm-10">
                <input type="text" class="input-text" placeholder="擅长" value="${user.goodAt}" id="goodAt" name="goodAt">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>简介：</label>
            <div class="formControls col-xs-8 col-sm-10">
				<textarea id="introduction" name="introduction" class="textarea"
                          placeholder="请输简介信息（250字以内）" >${user.introduction }</textarea>
            </div>
        </div>

        <div class="row cl">
            <div class="col-sm-1 col-sm-offset-2">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
            <div class="col-sm-1">
                <input class="btn btn-warning radius" type="reset" value="&nbsp;&nbsp;重置&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.all.min.js"> </script>
<script type="text/javascript" src="lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    /* 使用jquery-validation技术进行表单提交前的校验 */
    $().ready(function(){
        /* 在键盘按下并释放及表单提交时验证 */
        $("#userForm").validate({
            // 校验规则
            rules:{
                username:{
                    required:true,
                    isEnglish:true,
                    minlength:2,
                    remote:{  // 通过异步验证来判断用户名是否重复，返回ture或false。达到局部刷新的效果
                        url:"user/checkUsername.do",
                        type:"post",
                        dataType:"json",
                        data:{
                            username:function(){
                                return $("#username").val();
                            }
                        }
                    }
                },
                realname:{
                    required:true,
                    isChinese:true,
                    minlength:2
                },
                password:{
                    required:true
                },
                passwordAgain:{
                    equalTo:"#password"
                },
                age:{
                    required:true,
                    isDigits:true
                },
                idCard:{
                    required:true
                },
                gender:{
                    required:true
                },
                education:{
                    required:true
                },
                phone:{
                    required:true,
                    isMobile:true
                },
                email:{
                    required:true
                },
                deptId:{
                    required:true
                },
                jobId:{
                    required:true
                },
                superiorId:{
                    required:true
                },
                goodAt:{
                    required:true
                },
                introduction:{
                    required:true
                }
            },

            //错误提示
            messages:{
                username:{
                    required:"用户名不能为空",
                    isEnglish:"用户名为英文",
                    minlength:"用户名至少2个字符",
                    remote:"用户名已经存在"
                },
                realname:{
                    required:"真实姓名不能为空",
                    isChinese:"真实姓名为中文",
                    minlength:"真实姓名至少2个字符"
                },
                password:{
                    required:"密码不能为空"
                },
                passwordAgain:{
                    equalTo:"再次输入的密码不一致"
                },
                age:{
                    required:"年龄不能为空",
                    isDigits:"年龄为数字"
                },
                idCard:{
                    required:"身份证号不能为空"
                },
                gender:{
                    required:"请选择性别"
                },
                education:{
                    required:"请选择教育背景"
                },
                phone:{
                    required:"电话号码不能为空",
                    isMobile:"请输入正确的电话号码"
                },
                email:{
                    required:"邮箱不能为空"
                },
                deptId:{
                    required:"请选择科室"
                },
                jobId:{
                    required:"请选择职务"
                },
                superiorId:{
                    required:"请选择上级"
                },
                goodAt:{
                    required:"擅长不能为空"
                },
                introduction:{
                    required:"简介不能为空"
                }

            },

            /* 校验成功后的处理：
             *		1. 函数中的form就是上面表单的原始DOM对象
             * 		2. 原生对象-->Jquery对象：$(原生DOM对象)
             * 		3. Jquery对象-->原生对象: Jquery对象[0]
             *
             */
            submitHandler:function(form){
                $(form).ajaxSubmit(function(respData){
                    console.log(respData);
                    // 添加完毕后的提示
                    layer.msg(respData.msg,{icon:respData.code,time:2000},function(){
                        // 添加成功后
                        if(respData.code == 1){
                            // 刷新父页面表格
                            parent.refreshTable();
                            // 通过父页面关闭模态窗口
                            parent.layer.closeAll();
                        }
                    });
                });
            }
        });
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
